{extend name="home/base" /}
{block name="style"}
body{ background:#E8E8E8}
#product{ background:#fff;/*-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px 5px #333333;*/ box-shadow: 2px 0px 2px rgba(0, 0, 0, .2),-2px 0px 2px rgba(0, 0, 0, .2); margin-bottom:4px;}
#product .middle h1{ font-size:24px; font-weight:blod;}
#product .middle li{ margin-right:1.5em;}
#product .middle li i{ color:#30A771}
#product .right > div{ margin-left:50px;}
#product .right > div > p{text-align:center}
#product .uk-article-meta{font-size:14px; letter-spacing:.2em; text-align:justify; line-height:1.6em;}

/* 导航 */
.breadcrumb {padding-left: 40px;margin-bottom: 0;}
.breadcrumb {list-style: none;}
.breadcrumb > li + li:before {padding: 0 5px;color: #ccc;content: "/\00a0";}
.breadcrumb > li {display: inline-block;}

.m{ width: 100%; margin-left: auto; margin-right: auto;}
.jqueryzoom { position: relative; padding: 0; border: solid 1px #eaeaea; width: 100%; height:auto; overflow: hidden; /*display: inline-block;*/ }
/*放大镜是基于图片大小自动生成的，每次都要把jqueryzoom中img的大小和jqueryzoom盒子大小设置为一样的，不然放大镜滑块有可能溢出*/
.jqueryzoom img { width: 100%;}
.m ul{ margin-top:10px;}
.m ul > li > img{border:2px solid #FFF;}
.m ul > li > img.cloudzoom-gallery-active{border:2px solid #fc5755;}

.top span {padding-left: 9px;line-height: 36px;font-size: 18px;font-weight: bold;border-left: 5px solid #30A771;}
#product .right .layui-elem-field{border-color: #e6e6e6; border-width: 1px;border-style: solid; border-left:none; border-right:none; border-bottom:none}
#product .right .layui-elem-field legend {padding: 0 10px;font-size: 16px;font-weight: 300;}
#product .right .layui-elem-field > ul > li{ line-height:2.4; padding-left:20px;}
{/block}
{block name="body"}
{php}
use \fast\lucn\Lucn;
{/php}
<script type="text/javascript">CloudZoom.quickStart();</script>


<ul class="breadcrumb uk-container uk-container-center pt-20 pb-20">
        <li><i class="uk-icon-home"></i></li>
        <li><a href="{:url('index/index')}">首页</a></li>
        <li><a href="{:url('product/tolist')}">产品中心</a></li>
        <li class="active">{$one_category['name']}</li>
</ul>
	  
<article id="product" class="uk-container uk-container-center pb-20 pt-30">
<div class="arg uk-grid pb-20">
<div class="left uk-width-2-5">

<div class="m">
      <div class="jqueryzoom"> 
        <!--
        h5支持自定义属性，而处理数据的自定义属性则以“data-”开头，这里就是cloudzoom自己封装的数据处理属性，传入参数其实就是个对象格式，zoomSizeMode是要等比例的操作模式，说白了就是你要操作哪个标签的等比例，但必须是子标签才可以，这里当然是img标签了；zoomImage则是要操作的哪个image了；autoInside则是对响应式布局的适应处理，如果页面大小变得小于或等于指定的宽度（像素），CloudZoom将在“内部”模式工作，如果不做响应式处理了，加不加都无所谓。最后title如果有值，就会显示，没值，就不显示咯
    --> 
        <img id="img" class="cloudzoom" src="{$one.image}" data-cloudzoom="zoomSizeMode:'image',zoomImage: '{$one.image}',autoInside: 30"/> </div>
      {php}$arr_image = explode(',',$one['images']);$countimg = count($arr_image);{/php}
      <!--想切换多张图片，只需要改下面img中src中的路径，以及data-cloudzoom中两个img的路径，注意data-cloudzoom要和img中的路径一摸一样-->
      <ul class="uk-grid uk-grid-width-1-{if condition="$countimg egt 4"}{$countimg}{else /}4{/if} uk-grid-small">
	  {volist name="arr_image" id="v"}
      <li> 
          <img class="cloudzoom-gallery" src="/static/timthumb/?src={$v}&h=100&w=100&zc=1" data-cloudzoom="useZoom:'.cloudzoom',image:'{$v}',zoomImage:'{$v}'"/> 
      </li>
	  {/volist}
      </ul>
    </div>

</div>
<div class="middle uk-width-2-5">
<h1>{$one.title}</h1>
<hr class="uk-article-divider">
    <p class="uk-article-meta">淮阳黄花菜是河南十大名优特产之一，是蔬菜中的佳品，更是难得的保健品。-黄花菜高清大图5000年前农业鼻祖神农氏在宛丘(淮阳)尝百草艺五谷时，发现萱草花蕾具有治疗百病的神奇功效后，就作为一种药草种植。</p>
<hr class="uk-article-divider">
{php}
$obj = json_decode($one['configure']);
{/php}
{if condition="count($obj) gt 0"}
{foreach $obj as $key => $vo}
{if condition="$key neq '工艺'"}
<p><span>{$key}：</span><span>{$vo}</span></p>
{/if}
{/foreach}
{/if}
<ul class="uk-flex">
    {php}
	if(isset($obj->工艺)){
	    $arg = explode(',',$obj->工艺);
		echo '<h4><strong>独特工艺：</strong></h4>';
	}else{
	    $arg = [];
	}
	{/php}
    {foreach $arg as $key=>$vo}
	<li><i class="uk-icon-check-square-o"></i> {$vo}</li>
    {/foreach}
</ul>
</div>
<div class="right uk-width-1-5">
<div>
<fieldset class="layui-elem-field layui-field-title site-title">
<legend class="uk-text-center">品　牌</legend>
</fieldset>
<img class="logo" src="/assets/home/images/logo.png">
<p>淮王府</p>
</div>
</div>
</div>
<div class="top pb-20">
    <span class="top2">产品介绍</span>
</div>
<div class="content">
{$one.content}
</div>
</article>
{/block}